import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';

import home from 'src/components/home';
import list from 'src/components/list';
import detail from 'src/components/detail';

class Router extends Component {
	render(){
		return(
			<div>
				<Switch>
					<Route exact path="/" component={home} />
					<Route exact path="/list" component={list} />
					<Route exact path="/detail" component={detail} />
				</Switch>
			</div>
		)
	}
}

// <Route> 自带三个 render method 和三个 props 
// render methods 分别是：component、render、children
// props 分别是：match、location、history

export default Router;


/**
 * 使用H5 historyAPI打包上线时有可能，页面刷新后空白。
 * 这是由于history模式不同于哈希模式，地址栏刷新时，会向服务器发送请求造成的。
 * 因此我们需要服务器做一下改动。
 * 这里以node为例：
 * 
const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))

// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

*/